<template>
    <div class="table-tools">
        <a-button type="primary" ghost @click="onToAddData">
            <template #icon><PlusOutlined /></template>
            添加数据源
        </a-button>
        <a-button
            type="primary"
            ghost
            :disabled="!hasSelectedModify"
            @click="onModify"
        >
            <template #icon><EditOutlined /></template>
            修改
        </a-button>
        <a-popconfirm
            title="你确定删除选中的数据?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="onDel"
        >
            <a-button type="primary" ghost :disabled="!hasSelected">
                <template #icon><CloseOutlined /></template>
                删除
            </a-button>
        </a-popconfirm>
        <!-- <a-popconfirm
            title="确定导出所有数据源吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="onExportExcel"
        >
            <a-button type="primary" ghost>
                <template #icon><DownloadOutlined /></template>
                导出
            </a-button>
        </a-popconfirm> -->
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { remove, exportExcel } from "@/api/index";
import { message } from "ant-design-vue";
import {
    PlusOutlined,
    CloseOutlined,
    EditOutlined,
    DownloadOutlined,
} from "@ant-design/icons-vue";
export default defineComponent({
    name: "Tools",
    props: {
        hasSelected: {
            type: Boolean,
        },
        hasSelectedModify: {
            type: Boolean,
        },
        selectId: {
            type: String,
        },
    },
    setup(props, { emit }) {
        const { selectId }: any = toRefs(props);
        const router = useRouter();
        const state = reactive({
            onDel: () => {
                remove(selectId.value).then(() => {
                    emit("del")
                });
            },
            onModify: () => {
                emit("modify", {
                    visible: true,
                    title: "修改数据源",
                    loading: false,
                });
            },
            onToAddData: () => {
                router.push("/manage/data_add");
            },
            onExportExcel: () => {
                exportExcel().then(({ msg }: any) => {
                    let href = `${import.meta.env.VITE_APP_API_BASE_URL}/common/download?fileName=${msg}`
                    let a = document.createElement("a");
                    a.href = href;
                    a.download = `${new Date().getTime()}`;
                    let event = document.createEvent("MouseEvents");
                    event.initMouseEvent(
                        "click",
                        true,
                        false,
                        window,
                        0,
                        0,
                        0,
                        0,
                        0,
                        false,
                        false,
                        false,
                        false,
                        0,
                        null
                    );
                    a.dispatchEvent(event);
                    message.success("导出成功！");
                });
            },
        });
        return {
            ...toRefs(props),
            ...toRefs(state),
        };
    },
    components: {
        PlusOutlined,
        CloseOutlined,
        EditOutlined,
        DownloadOutlined,
    },
});
</script>
<style lang="less" scoped>
.table-tools {
    margin-bottom: 10px;
    > button {
        margin-right: 4px;
    }
}
</style>